<!--  -->
<template>
  <div>
    <div class="Face">
      <div class="imgBox">
        <span>左手：</span>
        <leftHand :person-name="personName"></leftHand>
      </div>
      <div class="imgBox">
        <span>右手：</span>
        <rightHand :person-name="personName"></rightHand>

      </div>

    </div>
    <el-dialog :visible.sync="dialogVisible" :destroy-on-close="true">
      <div class="jp2-img2">
        <img :src="detailsItem" data-display-polyfill-info="true" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { delPersonFaceApi, getEventIdentity, handleRemoteAdd, queryPersonIdByName } from "@/api/community/person";
import leftHand from "@/views/person/person/sub/leftHand.vue";
import rightHand from "@/views/person/person/sub/rightHand.vue";
export default {
  props: {
    personId: {
      type: String,
      default: "",
    },
    personName: {
      type: String,
      default: "",
    },
  },
  components:{
    leftHand,
    rightHand,
  },
  data() {
    return {
      personIdData: [],
      plamVeinInterval: null,
      loading_right: false,
      loadCompletedObj: {
        '-1': `已发送到设备，设备回复:失败`,
        '0': '已发送到设备，设备回复:等待',
        '1': '已发送到设备，设备回复:成功',
        '2': '已发送到设备，设备回复:正在删除'
      },
      leftUploadRef: "",
      rightUploadRef: "",
      leftImageList: [], //左手0
      rightImageList: [], //右手1
      imageUrl: "",
      form: {
        idCardFrontFile: "",
      },
      dialogVisible: false,
      dialogImageUrl: "",
      detailsItem: {},
    };
  },
  methods: {

    getRight(personId) {
      this.rightImageList = [];
      let query_r = {
        personId: personId,
        type: "plamVeinRight",
      };
      getEventIdentity(query_r).then((res) => {
        let list = res;
        list.forEach((item) => {
          item.url = item.identityData;
          item.name = item.filename;
        });
        list.map((item) => {
          this.rightImageList.push(item);
        });
      });
      if (this.rightImageList.length !== 0) {
          clearInterval(this.rightListInterval)
        }
    },
    //掌静脉列表轮询
    setIntervalForPalmVein(id) {
      this.leftListInterval = setInterval(() => {
        this.getLeft(id)
      }, 2000);
      this.rightListInterval = setInterval(() => {
        this.getRight(id)
      }, 2000);
    },
    // 拿id
    setIntervalMethod() {
      let params = { name: this.personName }
      const interval = setInterval(() => {
        queryPersonIdByName(params).then(res => {
          // console.log("daf", res)
          if (res.length) {
            this.personIdData = res
            clearInterval(interval)
            // this.$emit("")
            // console.log(this.personIdData[0])
            // this.setIntervalForPalmVein(this.personIdData[0].personId)
          }
        }).catch(e => {
          console.log(e);
        })
      }, 2000)
    },

    addRemoteFile(type) {
      let params = {
        name: this.$props.personName,
        effectiveStartTime: JSON.parse(window.localStorage.getItem("time-array")).effectiveStartTime,
        validEndTime: JSON.parse(window.localStorage.getItem("time-array")).validEndTime,
        type: type,
      }
      // params = JSON.parse(window.localStorage.getItem("time-array"))
      // console.log('params1', params)
      //左手
      console.log(type)
      if (type === 0) {
        this.loading_left = true
        handleRemoteAdd(params).then(r => {
          console.log(r);
          this.loading_left = false
          this.$message.success("右手操作成功，等待设备回传结果");
          this.setIntervalMethod()
        }).catch(e => {
          console.log(e);
          this.loading_left = false
          this.$message.error("操作失败，请重试");
        })
        console.log('左手')
      }
      //右手
      else {
        this.loading_right = true
        handleRemoteAdd(params).then(r => {
          console.log(r);
          this.loading_right = false
          this.$message.success("右手操作成功，等待设备回传结果");
          this.setIntervalMethod()
        }).catch(e => {
          console.log(e);
          this.loading_right = false
          this.$message.error("操作失败，请重试");
        })
        console.log('右手')

      }

    },

    // 打开弹框
    handlePictureCardPreview(uploadFile) {
      console.log('uploadFile', uploadFile.url)
      this.dialogImageUrl = uploadFile.url;
      this.dialogVisible = true;
      // jp2
      this.$forceUpdate();
      this.detailsItem = process.env.VUE_APP_BASE_URL + uploadFile.url;
      console.log("this.detailsItem-plainvein", this.detailsItem);
      this.$nextTick(() => {
        this.asyncJp2();
      });
    },
    asyncJp2() {
      const s = document.createElement("script");
      s.type = "text/JavaScript";
      s.setAttribute("data-callType", "callScript");
      s.src = `${process.env.VUE_APP_BASE_URL}/html/jp2-polyfill.js`;
      // s.src = `http://192.168.30.65:92/html/jp2-polyfill.js`;
      // s.src = "/src/utils/html/jp2-polyfill.js";
      // console.log('s.src',s.src);
      document.head.appendChild(s);
    },
  },
  mounted() {
    // this.getPersonPalmVein();
  },
  // watch: {
  //   leftImageList: function (val) {
  //     console.log('Bianle ', val)
  //   },
  // },
};
</script>

<style lang="scss">
.Face {
  display: flex;

  .imgBox {
    width: 50%;
    padding: 10px;
  }
}
</style>


